Template.qmd

Subtitle here

Author
Affiliation

Dr. Gordon Wright

LittleMonkeyLab@Goldsmiths

Published

22 Mar, 2025

1 First Slide

This is my first slide content

These are speaker notes for the first slide. They will be visible in a separate window when presenting. They will also be visible in a separate section on the website when the presentation is published.

2 Second Slide

  • Bullet point 1
  • Bullet point 2
  • Bullet point 3

Here are detailed notes about bullet point 1. Additional context for bullet point 2. Important information related to bullet point 3.

3 Poll Elements with Icons

The .poll class now has an automatic FontAwesome chart icon:

Poll Question: Which icon style do you prefer?

  1. Solid icons
  2. Regular (outlined) icons
  3. Brand icons
  4. No icons?

4 Changing the Icon

To use a different icon, modify the CSS content property: {{< fa chess-pawn >}}

.reveal .slide .poll::before {
  content: "\f201";  /* Chart icon */
}

5 Available FontAwesome Icons

You can replace "\f201" with any other FontAwesome icon code:

  • \f0e0 - Envelope
  • \f024 - Flag
  • \f0eb - Lightbulb
  • \f059 - Question Circle
  • \f5da - Vote Yea
  • \f086 - Comments
  • \f521 - Crown

6 Other Poll Examples

Knowledge Check: What makes FontAwesome work in Quarto?

  1. Adding the CSS class
  2. Including the FontAwesome CSS in the header
  3. Setting the font-family in CSS
  4. All of the above

7 Manual Icons in Content

You can also manually insert icons anywhere using HTML:

  • Success indicator
  • Failure indicator
  • Information
  • Warning
  • Appreciation

8 How It Works

  1. We load FontAwesome in the document header:

    include-in-header:
  text: |
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

  2. We use CSS to add the icon automatically:

    .poll::before {
  font-family: "Font Awesome 6 Free";
  content: "\f201";
  /* positioning styles */
}

9 Finding Icon Codes

To find other icon codes:

  1. Visit FontAwesome Icons
  2. Select an icon you like
  3. Look for the Unicode value (e.g., “f201”)
  4. Use it in your CSS with a backslash: \f201

10 Custom Icon Classes

You can also create your own icon classes:

.icon-warning::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f071";
  color: $orange;
  margin-right: 0.5em;
}

Then use <span class="icon-warning">Warning text</span>

11 Icon Size and Color Options

Font Awesome icons can be customized:

Extra Small
Small
Regular
Large
2x
3x

12 More Complex Icons

FontAwesome also supports stacked and transformed icons:

13 Level2

Text

13.1 Level 3

text3

13.1.1 level 4

text4

14 Typography

This presentation uses:

  • Main Font: “Commissioner” (sans-serif)
  • Heading Font: “Cabin” (sans-serif)
  • Quote Font: “Nanum Myeongjo” (serif)
  • Special Adage Font: “Amatic SC” (display)

15 Color Palette

The theme defines these colors:

  • Red (#bf2642): ■■■■
  • Orange (#f2a03d): ■■■■
  • Green (#02733e): ■■■■
  • Purple (#73245e): ■■■■
  • Blue (#00817c): ■■■■
  • Beige (#f8f5f0): ■■■■

16 Custom Classes: Question

This is a question box with blue left border and light blue background. It’s perfect for rhetorical questions or discussion prompts.

17 Custom Classes: Poll

Poll Question: Which of these features do you find most useful?

  1. Custom font combinations
  2. Color themes
  3. Special block elements
  4. Layout options

18 Custom Classes: Appex

This is an “appex” box with dark blue left border and light blue background. Great for examples, applications, or extending ideas.

19 Custom Classes: Quotes

This is a blockquote styled with the Nanum Myeongjo font. Notice the elegant serif style and slight color contrast. Ideal for emphasizing important quotes or statements.

20 Custom Classes: Adages

This is a Big Adage - 250% font size in Amatic SC

This is a Small Adage - 150% font size in Amatic SC

21 HTML Element Classes

21.1 Block Elements

Block Element (Span)

Block Element (Div)

21.2 Inline Elements

Inline Element (Span)

Inline Element (Div)

21.3 Meta Elements

Meta Element (Span)

Meta Element (Div)

22 Size Variations

Regular text size (default)

This text is displayed with the “small” class (75% of normal size).

23 Code Blocks

# A Python code block with custom styling
def hello_world():
    """This demonstrates the code block styling"""
    return "Hello, World!"

# Notice the beige background and purple text
for i in range(5):
    print(f"Count: {i}")

24 Details/Summary Element

Click to reveal additional information This content is hidden by default but can be expanded. The summary element is styled to be 75% of normal font size.

25 Inverse Box

This is an inverse box which has a colored background and white text.

26 Centered Content

This content is vertically and horizontally centered in the slide. Perfect for emphasizing a single important point.

27 Interactive Elements

  • The theme includes styling for slide menu buttons
  • Navigation elements are positioned carefully
  • Header logo is styled to be 0.55em in height
  • Title slide has special styling

28 Annotations

Element Description Use Case
.question Blue-bordered box Discussion questions
.poll Orange-bordered box Interactive polls or quizzes
.appex Blue background box Applications and examples
.bigadage/.smalladage Special Amatic SC font Memorable statements
.block-el/.inline-el/.meta-el Color-coded elements Visual differentiation
.small Reduced text size Less important content
.v-center-container Centered content Emphasis on key points
.inversebox Colored background text Stand-out statements

29 Title Slide Customizations

  • The title slide has centered text (.title-slide class)
  • Uses ‘Avenir’ font for title and author
  • Author name in body color
  • Institute name in italics at 80% size
  • 5em top margin

The main title slide (first slide) has special styling that includes centered text, specific font choices, and careful spacing.

30 Code Block Deep Dive

# This code block demonstrates:
# - Beige background (#f8f5f0)
# - Purple code text (#73245e)
# - Dark beige border (#9f8e71)
# - 0.8em font size
# - 6px by 9px padding
# - Max height of 600px

data <- read.csv("example.csv")
ggplot(data, aes(x = x, y = y)) +
  geom_point(color = "#bf2642") +
  theme_minimal() +
  labs(title = "Example Plot")

31 Light Orange Background

This demonstrates the light orange background created using:

$light-orange: lighten($orange, 60%);

Great for highlighting content without being too intense.

32 Dark Purple Elements

This text uses the dark purple color variable:

$dark-purple: #39122f;

35 Slide Menu Button

The slide menu button positioning:

.slide-menu-button {
  left: 10px !important;
  bottom: 10px !important;
}

Located at the bottom-left corner of your slides.

36 Slide Number Hiding

The theme hides slide numbers on the title slide:

.reveal .slide-number > a[href*='title-slide'] {
  display: none;
}

37 Root Color Variables

CSS custom properties defined at the root:

:root {
  --red-100: #bf2642;
  --orange-100: #f2a03d;
  --green-100: #02733e;
  --purple-100: #73245e;
}
Using –red-100 variable
Using –orange-100 variable
Using –green-100 variable
Using –purple-100 variable

38 Presentation Font Size

The base font size is set to:

$presentation-font-size-root: 46px;

This impacts all relative sizing throughout the presentation.

39 Pre-styled Code Blocks

Code blocks have custom styling:

.reveal pre.sourceCode code {
  // Specific styling for source code blocks
  // Including background color, padding, and height constraints
}

40 Disabled Comment Blocks

These commented-out sections represent alternative styling options that are currently disabled:

/*
.reveal .slide .poll::before {
  // Font Awesome icon styling that's currently disabled
}
*/

/*
.reveal .slide h1 {
  font-family: 'Nanum Myeongjo', serif;
}
*/

/*
.slide-background.center.present {
  background-color: #f8f5f0;
}
*/

41 Alternative Title Slide Options

These commented options show alternative title slide styling:

/*
#title-slide {
  text-align: left;
  font-family: 'Nanum Myeongjo', serif;
  margin: 5em 0em 0em 0em;
}
*/

/*
#title-slide p.author::before {
  content: "";
  display: block;
  border: none;
  background-color: $body-color;
  color: $body-color;
  height: 3px;
  margin-bottom: 1em;
}
*/

42 Body Text Colors and Background

The default text and background colors:

  • Body text color: #5c5859
  • Background color: #fff (white)
  • Heading color: $blue (#00817c)

43 CSS Structure Overview

Your CSS is organized into:

  1. SCSS Variables - Font, color, and size definitions
  2. Custom Classes - Special element styling
  3. Layout Components - Positioning and structure
  4. Commented Alternatives - Optional styling

44 Complete Color Reference

Name Hex Code Variable Sample
Red #bf2642 $red / –red-100 ■■■
Orange #f2a03d $orange / –orange-100 ■■■
Green #02733e $green / –green-100 ■■■
Purple #73245e $purple / –purple-100 ■■■
Dark Purple #39122f $dark-purple ■■■
Blue #00817c $blue ■■■
Beige #f8f5f0 $beige ■■■
Dark Beige #9f8e71 $dark-beige ■■■
Body Color #5c5859 $body-color ■■■

45 Element Class Reference

Selector Purpose CSS Variables Used
.question Discussion prompts Blue border, light blue background
.poll Interactive questions Orange border, beige background
.appex Examples Dark blue border, light blue background
.bigadage Bold statements Amatic SC font, 250% size
.smalladage Secondary statements Amatic SC font, 150% size
.block-el Block elements Green or white on green
.inline-el Inline elements Red or white on red
.meta-el Meta elements Orange or white on orange

46 Final Notes

This presentation, combined with the previous one, demonstrates all styling elements from your custom CSS, including:

  • Font families and sizes
  • Color variables and applications
  • Custom block and inline elements
  • Positioning and layout elements
  • All active and commented-out options

You now have a complete reference for your custom Quarto theme.

47 Example poll

You can provide set up for the code as if it is a normal slide.

What is your favorite color?

A. Red
B. Green
C. Blue